<template>
    <view class="container">
        <view class="container__video">
            <video class="w-100vw"></video>
        </view>
        <view class="container__intro">
            <IntroductionCard title="心理咨询与心理辅导：基础理论与技术应用高薪AI" desc="筛查焦虑、抑郁、压力水平等常见心理指标，识别情绪波动规律，提供应对策略与专业指导。">
                <template #extra-content>
                    <view class="author-card flex justify-between items-center my-20">
                        <view class="flex">
                            <view class="author-card__cover">
                                <uv-image src="/static/logo.png" shape="circle" height="40rpx" width="40rpx"></uv-image>
                            </view>
                            <view class="ml-10 flex items-center">
                                <view class="author-card__name fs-28 fw-600">阳慕颜</view>
                                <view class="author-card__title fs-20 ml-10">认证心理咨询师</view>
                            </view>
                        </view>
                        <view class="author-card__follow fs-20">
                            共47节·播放量348055
                        </view>
                    </view>
                </template>
            </IntroductionCard>
        </view>
        <view class="container__content mt-20 ">
            <view class="container__content-tabs w-500 py-20">
                <uv-tabs :list="[{name:'课程介绍'},{name:'目录'},{name:'评论',badge:{value:99}}]"
                    :activeStyle="{color:'#6e64c2',padding:'10rpx 20rpx',fontWeight:'bold'}" lineColor="#6e64c2"
                    :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx',color:'#666a74'}"
                    :scrollable="false"></uv-tabs>
            </view>
            <view class="container__content-intro pb-160 px-25">
                <view>
                    心理咨询与心理辅导简述
                </view>
            </view>
            <view class="container__content-catalog pb-160 px-25">

                <view class="list">
                    <view class="list__group">
                        <view class="fw-600 fs-30 p-10 pb-20">导论{{itemId}}</view>
                        <view class="list__item flex justify-between rounded-20 py-20 px-25 mb-10 items-center"
                            @click="play(1)" :class="{'list__item--active':itemId===2}">
                            <view>
                                <view class="list__item-title flex fs-24 items-center">
                                    <view class="fw-600">01</view>
                                    <view class="ml-15">精神分析</view>
                                </view>
                                <view class="list__status flex fs-22 c-bbbbbb pl-40 pt-20">
                                    <view class="list__status-item">
                                        <uv-icon name="play-circle" :color="itemId===2?'#e0c6f2':'#000'"></uv-icon>
                                        <view class="ml-5">视频课</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="clock"
                                            :color="itemId===2?'#e0c6f2':'#000'"></uv-icon>
                                        <view class="ml-5">39分44秒</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="minus-circle"
                                            :color="itemId===2?'#e0c6f2':'#000'"></uv-icon>
                                        <view class="ml-5">已完成</view>
                                    </view>
                                </view>
                            </view>
                            <view class="list__item-icon">
                                <uv-icon name="" size="20" :name="itemId===2?'play-circle':'lock'"
                                    :color="itemId===2?'#9073e9':'#000'"></uv-icon>
                            </view>
                        </view>
                        <view class="list__item flex justify-between rounded-20 py-20 px-25 mb-10 items-center"
                            @click="play(2)">
                            <view>
                                <view class="flex fs-24 items-center">
                                    <view class="fw-600">01</view>
                                    <view class="ml-15">精神分析</view>
                                </view>
                                <view class="list__status flex fs-22 c-bbbbbb pl-40 pt-20">
                                    <view class="list__status-item"><uv-icon name="play-circle"></uv-icon>
                                        <view class="ml-5">视频课</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="clock"></uv-icon>
                                        <view class="ml-5">39分44秒</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="minus-circle"></uv-icon>
                                        <view class="ml-5">已完成</view>
                                    </view>
                                </view>
                            </view>
                            <view class="list__item-icon">

                                <view class="list__item-icon--active">
                                    <uv-icon name="play-circle" size="20"></uv-icon>
                                </view>
                            </view>
                        </view>
                        <view class="list__item flex justify-between rounded-20 py-20 px-25 mb-10 items-center"
                            @click="play(2)">
                            <view>
                                <view class="flex fs-24 items-center">
                                    <view class="fw-600">01</view>
                                    <view class="ml-15">精神分析</view>
                                </view>
                                <view class="list__status flex fs-22 c-bbbbbb pl-40 pt-20">
                                    <view class="list__status-item"><uv-icon name="play-circle"></uv-icon>
                                        <view class="ml-5">视频课</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="clock"></uv-icon>
                                        <view class="ml-5">39分44秒</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="minus-circle"></uv-icon>
                                        <view class="ml-5">已完成</view>
                                    </view>
                                </view>
                            </view>
                            <view class="list__item-icon">
                                <view class="list__item-icon--disable">
                                    <uv-icon name="lock" size="20"></uv-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="list__group">
                        <view class="fw-600 fs-30 p-10 pb-20">基理论</view>
                        <view class="list__item flex justify-between rounded-20 py-20 px-25 mb-10 items-center"
                            v-for="i in 4">
                            <view>
                                <view class="flex fs-24 items-center">
                                    <view class="fw-600">02</view>
                                    <view class="ml-15">精神分析</view>
                                </view>
                                <view class="list__status flex fs-22 c-bbbbbb pl-40 pt-20">
                                    <view class="list__status-item"><uv-icon name="play-circle"></uv-icon>
                                        <view class="ml-5">视频课</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="clock"></uv-icon>
                                        <view class="ml-5">39分44秒</view>
                                    </view>
                                    <view class="list__status-item"><uv-icon name="minus-circle"></uv-icon>
                                        <view class="ml-5">已完成</view>
                                    </view>
                                </view>
                            </view>
                            <view class="list__item-icon">
                                <uv-icon name="lock" size="20"></uv-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="container__content-comment pb-160 px-25">
                <CComment ref="ccRef" v-model:myInfo="myInfo" v-model:userInfo="userInfo" v-model:tableData="tableData"
                    v-model:tableTotal="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
                    @deleteFun="deleteFun"></CComment>
                <view class="content__card-btn" @tap="openComment">发表新评论</view>
            </view>
            <view class="container__footer">
                <TabBar theme="custom">
                    <template #bar>
                        <Mybutton title="免费观看" :transition="true" color="#fff" width="380rpx" borderRadius="30rpx">
                        </Mybutton>
                    </template>
                </TabBar>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
    import { ref } from "vue";
    import IntroductionCard from "@/components/IntroductionCard.vue";
    import TabBar from "@/components/TabBar.vue";
    import Mybutton from "@/components/Button.vue";
    import CComment from "@/components/cc-comment/cc-comment.vue";
    let itemId = ref('null');
    const play = (id : any) => {
        itemId.value = id;
        console.log(id)
    }
    // 唤起新评论弹框
    let ccRef = ref(null);
    function openComment() {
        ccRef.value.newCommentFun();
    }

    // 点赞回调事件
    function likeFun({ params }, callback) {
        console.log("likeFun", params);
        // 当请求失败, 调用callback重置点赞效果;
        // Demo如下:
        // axios.post("http://xxx/like", { id: params }).then((res) => {
        //   if (res.code !== 0) {
        //     callback(res);
        //   }
        // });
    }

    // 评论回调事件
    function replyFun({ params }, callback) {
        console.log("replyFun", params);
        // 当请求成功, 调用callback执行评论插入;
        // Demo如下:
        // axios.post("http://xxx/reply", { ...params }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
        setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
    }

    /** 删除回调事件
     * mode 删除模式
     * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
     * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
     * -- all : 删除所有评论包括回复评论
     */
    const deleteMode = ref("all");
    function deleteFun({ params, mode }, callback) {
        console.log("deleteFun", { params, mode });
        // 当请求成功, 调用callback执行评论删除;
        // Demo如下:
        // axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        switch (mode) {
            case "bind":
                // 逻辑: 调用接口进行用户评论内容修改 update
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            case "only":
                // 逻辑: 调用接口删除一个评论 delete
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            default:
                // all
                // 逻辑: 调用接口删除多个评论 [delete]
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
        }
    }

    // ----模拟数据------模拟数据------模拟数据----
    // 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let myInfo = ref({
        user_id: 1, // 用户id
        user_name: "cc", // 用户名
        user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
    });
    // 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let userInfo = ref({
        user_id: 2, // 用户id
        user_name: "ikun", // 用户名
        user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
    });
    let tableTotal = ref(4); // 评论总数
    let tableData = ref([
        {
            id: 120, // 评论id
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 2, // 用户id
            user_name: "ikun", // 用户名
            user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
            user_content: "唱,跳,rap,篮球", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 120, // 点赞数统计
            create_time: "2025-02-19 09:16", // 创建时间
        },
        {
            id: 130,
            parent_id: 120, // 评论父级的id
            reply_id: 120, // 被回复评论的id
            reply_name: "ikun", // 被回复人名称
            user_id: 3, // 用户id
            user_name: "小黑子", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
            user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 67, // 点赞数统计
            create_time: "2025-03-07 00:06", // 创建时间
        },
        {
            id: 140,
            parent_id: 120, // 评论父级的id
            reply_id: 130, // 被回复评论的id
            reply_name: "小黑子", // 被回复人名称
            user_id: 4, // 用户id
            user_name: "守护宗主维护宗门", // 用户名
            user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
            user_content: "你露出鸡脚了", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 16, // 点赞数统计
            create_time: "2025-05-10 17:08", // 创建时间
        },
        {
            id: 150,
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 5, // 用户id
            user_name: "音乐制作人", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
            user_content:
                "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
            is_like: true, // 用户是否点赞
            like_count: 8, // 点赞数统计
            create_time: "2025-12-21 00:45", // 创建时间
        },
    ]); // 评论表
</script>
<style scoped lang="scss">
    .container {
        background-color: #f3f5fd;

        &__content {
            background-color: #fff;

            &-tabs {
                // border: 1px red solid;
                margin: 0 auto;
            }
        }
    }

    .list {
        &__item {
            background-color: #f5f7ff;

            &--active {
                background: linear-gradient(to right, #f4e6ff, #faf2ff);

                .list__item-title {
                    color: #b468e8;
                }

                .list__status {
                    color: #cdaae5;
                }
            }
        }

        &__status {
            &-item {
                display: flex;
                align-items: center;
                margin-right: 25rpx;
            }
        }
    }

    .author-card {
        &__title {
            background-color: #fcf0de;
            color: #e8b979;
            padding: 5rpx 10rpx;
        }

        &__follow {
            color: #676b71;
        }
    }
</style>